* {
	padding:0;
	margin:0;
}
body{
	background: #333;
}
.person{
	width:100px;
	height:200px;
	position:absolute;
	top:200px;
	left:100px;
	animation-name:run;
	animation-duration:3s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	
}
@keyframes run {
	0% {
	transform:translateX(0);
}
100% {
	transform:translateX(1200px);
}
}
/*画帽子檐*/
.person .head:before{
	content: "";
	position: absolute;
	top: 0px;
	left: -6px;
	height: 2.7px;
	width: 42px;
	border-radius: 20%;
	border: 4px solid white;
	background-color: #fff;
	transform-origin: 50% 100% 0px;
	z-index: 90;
}
/*画人脸*/
.person .head{
	position: absolute;
	top: -30px;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	border: 4px solid white;
	transform-origin: 50% 100% 0px;
	z-index: 90;
	-webkit-animation: bob 2s infinite alternate;
	animation: head 0.5s linear infinite;
}
@keyframes head{
	0% {
	   transform:rotate(-10deg);
    }
    100%{
    	transform:rotate(10deg);
    }
}
/*画帽子顶*/
.person .head:after{
	content: "";
	position: absolute;
	top: -12px;
	left: 9px;
	height: 15px;
	width: 15px;
	border-radius: 30%;
	border: 4px solid white;
	background-color: #fff;
	z-index: 90;
}
/*画腰*/
.person .torso{
	position: absolute;
	height: 100px;
	width: 0;
	border-left: 2px solid white;
	left: 17px;
	top: 10px;
}
/*胳膊*/
.arm-left,.arm-right{
	width:40px;
	height:50px;
	border-left:2px solid white;
	border-bottom:2px solid white;
	position:absolute;
	top:35px;
	left:20px;
	transform-origin:0 0;
}
.arm-left{
	transform:rotate(45deg);
	animation:arm-left 0.5s linear infinite;
}
@keyframes arm-left {
	0% {
	transform:rotate(60deg);
}
50% {
	transform:rotate(-45deg);
}
100% {
	transform:rotate(60deg);
}
}
.arm-right {
	transform:rotate(-45deg);
	animation:arm-right 0.5s linear infinite;
}
@keyframes arm-right {
	0% {
	transform:rotate(-45deg);
}
50% {
	transform:rotate(60deg);
}
100% {
	transform:rotate(-45deg);
}
}
/*腿*/
.leg-left,.leg-right {
	width:50px;
	height:55px;
	border-bottom:2px solid white;
	border-right:2px solid white;
	position:absolute;
	top:110px;
	left: -33px;
	transform-origin:100% 0;
}
.leg-left {
	transform:rotate(45deg);
	animation:leg-left 0.5s linear infinite;
}
@keyframes leg-left {
	0% {
	transform:rotate(45deg);
}
50% {
	transform:rotate(-60deg);
}
100% {
	transform:rotate(45deg);
}
}
.leg-right {
	transform:rotate(-80deg);
	animation:leg-right 0.5s linear infinite;
}
@keyframes leg-right {
	0% {
	transform:rotate(-80deg);
}
50% {
	transform:rotate(45deg);
}
100% {
	transform:rotate(-80deg);
}
}
